<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./myCssReset.css">
  <title>趣读网</title>
  <link rel="icon" href="./img/logo1.png" type="image/x-icon">
  <style>
.navigation{
      width: 1200px;    
      height: 60px;
      padding-top: 30px; 
      margin:auto;
      
    }
.navigation .logo{
  width: 36px;
  float: left;
}
.navigation .line{
  width: 1px;
  height: 35px;
  background-color: #e6e6e6;
  float: left;
  margin: 0 13px;
}
.navigation .tit{
  font-size: 24px;
  color: rgb(185, 53, 44);
  font-weight: 600;
  float: left;
}
.homenav{
  float: left;
  margin-left: 70px;
}
.homenav ul li{
  float: left;
  height: 53px;
  width: 147px;
  text-align: left;
  padding-top: 9px;
}
.homenav ul li a{
  color: black;
  font-weight: 600;
}
.homenav ul li a:hover{
  color: #c00b0b;
}
.homenavr .name>a{
  font-size: 10px;
  /* margin-left: 29px; */
  /* margin-top: 14px; */
  position: relative;
  top: 14px;
  left: 28px;
  color: #999;
  float: left;
}
.homenavr .return>a{
  font-size: 10px;
  margin-left: 2px;
  margin-top: 14px;
  color: #999;
  float: left;
}
.homenavr ul li>img{
  width: 14px;
  height: 14px;
  margin-left: 380px;
  margin-top: 15px;
  float: left;
}
.homenavr ul li a:hover{color:#d60a0a;}
/* 下拉菜单 */
.name ol li{
  line-height: 2;
  font-size: 10px;
  position: relative;
}
.name ol{
  display: none;
  position: absolute;
  top: 59px;
  left: 1290px;
  z-index: 100;
  background-color: #5b5c5c;
  width: 60px;
  height: 60px;
  text-align: center;
  padding-top: 10px;
}
.homenavr ul .name ol a{color: white;}
.homenavr ul .name:hover>ol{
  display: block;}
.bottomline{
  width: 100%;
  height: 20px;
  border-top: 2px solid rgb(231, 230, 230);
  margin-top: 50px;
}
.margin .user{
  width: 1200px;
  height: 200px;
  background-color: rgb(243, 241, 241);
  margin: auto;
  margin-top: 10px
}
.margin .details{
  width: 1200px;
  height: 460px;
  margin: auto;
}
.heada>img{
  width: 150px;
  margin-top: 24px;
  margin-left: 20px;
  float: left;
}
.heada>img:hover{transform: scale(1.2);}
.user .head button{float: right;width:100px;height:30px;font-weight:600;background-color: #d32f2f;color: white;margin-top: 54px;margin-right: 25px;border-radius: 5px;}
.screen{
  float: left;
  font-size: 20px;
  font-weight: 600;
  margin-top: 60px;
  margin-bottom: 15px;
  margin-left: 20px;
}
.screen img{width: 15px;}
.synopsis{float: left;margin-top: 110px;position: relative;right: 115px;
}
.synopsis .synopsisa{color: #999;font-weight: 300;}
.synopsis .synopsisb{color: #666;}
.recharge{
  float: right;
  width: 72px;
  height: 26px;
  background-color: white;
  font-size: 12px;
  text-align: center;
  line-height: 26px;
  border:1px solid #d32f2f;
  border-radius: 5px;
  position: relative;
  top: 140px;
  left: 98px;
}
.recharge a{
  color: #d32f2f;
}
.detailsa{padding-left: 35px;padding-top: 20px;}
.detailsa a{color: #999;}
.detailsa a:hover{color: black;}
.detailsa .detailsb{margin-left: 50px;}
.detailsa .detailsc{margin-left: 50px;}
.detailsa .detailsd{margin-left: 50px;}
.integral{width: 1200px;height: 450px; border: 1px solid rgb(202, 200, 200);margin-top: 16px;}
.category{width: 1150px;height: 40px;background-color: #f3f1f1;margin: auto;color: #999;font-size: 12px;margin-top: 20px;line-height: 40px;}
.categorya{margin-left: 20px;}
.categoryb{margin-left: 30px;}
.categoryc{margin-left: 300px;}
.categoryd{margin-left: 300px;}
.categorye{margin-left: 210px;}
.record{text-align: center;margin-top: 50px;}
.record img{height: 140px;}
.record p{font-size: 14px;color: #999;line-height: 70px;}
.foot{
  width: 100%;
  height: 95px;
  background-color: #f0f0f0;
  font-size: 14px;
  margin-top: 100px;
  margin-bottom: 50px;
  line-height: 95px;
  text-align: center;
}
.footgray a{
  color: #666;
  margin-left: 6px;
}
.footgray a:hover{color: #d60a0a;}
.footgray span{
  color: #dbd9d9;
  margin-left: 6px;
}
</style>
</head>
<body>
<div class="margin">
  <!-- 导航栏 -->
  <div class="navigation">
     <!-- 导航栏左边 -->
     <img src="./img/logo1.png" alt="" class="logo">
     <div class="line"></div>
     <div class="tit">个人中心</div>
     <div class="homenav">
       <ul class="clearfix">
       <li>
         <a href="#">我的书架</a>
       </li>
       <li>
         <a href="#">账户设置</a>
       </li>
       <li>
         <a href="#">我的动态</a>
       </li>
     </ul>
     </div>
     <!-- 导航栏右边 -->
     <div class="homenavr">
       <ul>
       <li>
         <img src="./img/back homepage.png" alt="">
       </li>
       <li class="return">
         <a href="#">返回首页</a>
       </li>
       <li class="name">
         <a href="#">张无敌123</a>
         <ol>
           <li><a href="#">个人主页</a></li>
           <li><a href="#">退出</a></li>
         </ol>
       </li>
     </ul>
   </div>
   <div class="bottomline"></div>
  </div>
  <!-- 用户头像区 -->
  <div class="user">
    <div class="head">
      <a href="#" class="heada"><img src="./img/head.png" alt=""></a>
      <button>账户信息修改</button>
    </div>
<div class="screen">
  <span>张无敌123</span>
  <img src="./img/star.png" alt="">
</div>
  <div class="synopsis">
     <span class="synopsisa">简介</span>
     <span class="synopsisb">暂无简介~</span>
  </div>
  <div class="recharge">
    <a href="#">立即充值</a>
  </div>
  </div>
  <!-- 用户详情区 -->
  <div class="details">
    <div class="detailsa">
      <a href="#">星值积分</a>
      <a href="#" class="detailsb">订阅消费</a>
      <a href="#" class="detailsc">捧场消费</a>
      <a href="#" class="detailsd">自动订阅</a>
    </div>
  <!-- 星值积分 -->
  <div class="integral">
    <div class="category">
      <span class="categorya">类别</span>
      <span class="categoryb">星值书籍</span>
      <span class="categoryc">作者</span>
      <span class="categoryd">星值等级</span>
      <span class="categorye">星值积分</span>
    </div>
     <!-- 下面记录区 -->
   <div class="record">
    <img src="./img/medal.png" alt="">
    <p>您暂时没有积分记录哦~</p>
  </div> 
  </div> 
</div>
     <!-- 页尾区 -->
     <div class="foot">
       <div class="footgray">
      <a href="#">关于趣读</a>
      <span>|</span>
      <a href="#">诚聘英才</a>
      <span>|</span>
      <a href="#">商务合作</a>
      <span>|</span>
      <a href="#">法律声明</a>
      <span>|</span>
      <a href="#">帮助中心</a>
      <span>|</span>
      <a href="#">作者投稿</a>
      <span>|</span>
      <a href="#">联系我们</a>
      <span>|</span>
      <a href="#">友情链接</a>
      <span>|</span>
      <a href="#">谨防诈骗</a>
    </div>
    </div> 
</div>
</body>
</html>